import ba from "@/as/empty-bg-6dea6f2a.png";
import logo from "@/as/dl_xr_logo.png";
import { request } from "@/utils/request";
import { Button, Checkbox, Input, message } from "antd";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";

const LoginPage: React.FC = () => {
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [agree, setAgree] = useState(false);
  const [loading, setLoading] = useState(false);
  const [codeLoading, setCodeLoading] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [messageApi, messageContext] = message.useMessage();
  const na = useNavigate();

  // const disabled = useMemo(() => {
  //   if (!phone) {
  //     return true;
  //   }
  //   if (!code) return true;
  //   if (!agree) return true;
  //   return false;
  // }, [phone, code, agree]);

  const onFinish = async () => {
    setLoading(true);
    const ret = await request.post("/api/admin/login", {
      username: phone,
      password: code,
    });
    setLoading(false);
    console.log(ret.data.data.token);
    if (ret.data.message === '管理员登录成功') {
      // console.log(ret.data);
      localStorage.setItem("token", ret.data.data.token);
      messageApi.success("登录成功");
      na("/");
    }
  };

  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (countdown > 0) {
      timer = setTimeout(() => setCountdown(countdown - 1), 1000);
    }
    return () => {
      clearTimeout(timer);
    };
  }, [countdown]);



  return (
    <div className="h-screen flex items-center justify-center" style={{
      background: `url(${ba}) center / cover no-repeat`,
    }}>
      {messageContext}
      <div className="hidden  sm:block" />
      <div className="w-full border md:w-[520px] lg:w-[700px] flex items-center justify-center m-auto p-8 rounded-lg shadow-lg">

        <div className="space-y-6 lg:space-y-8 w-full px-6 lg:px-36">
          {/* <img src={logo} alt="" className="w-[200px] sm:w-[300px] -mb-2" />  */}
          <Input
            size="large"
            placeholder="请输入账号"
            className="placeholder:text-sm"
            value={phone}
            onChange={(evt) => setPhone(evt.target.value)}
          />
          <div className="flex gap-2">
            <Input
              placeholder="请输入密码"
              className="placeholder:text-sm"
              size="large"
              value={code}
              onChange={(evt) => setCode(evt.target.value)}
            />
            {/* <Button
              block
              size="large"
              type="primary"
              loading={codeLoading}
              disabled={countdown > 0}
              onClick={sendCode}
              className="disabled:bg-[rgba(21,184,247,.4)] disabled:border-none !w-28 disabled:text-white"
            >
              {countdown > 0 ? `${countdown}秒后重试` : "发送验证码"}
            </Button> */}
          </div>
          <Button
            block
            size="large"
            type="primary"
            loading={loading}
            // disabled={disabled}
            className="disabled:bg-[rgba(21,184,247,.4)] disabled:border-none disabled:text-white"
            onClick={onFinish}
          >
            登录
          </Button>
          {/* <div className="text-sm flex items-center">
            <Checkbox
              className="text-sm"
              checked={agree}
              onChange={(v) => setAgree(v.target.checked)}
            >
              我已阅读并同意{" "}
            </Checkbox>
            <a className="text-[#1e80ff]" target="_blank" href="/user-protocol">
              《用户协议》
            </a>
            与
            <a
              className="text-[#1e80ff]"
              target="_blank"
              href="/privacy-protocol"
            >
              《隐私条款》
            </a>
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default LoginPage;
